<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
     <meta name='viewport' content='width=device-width, initial-scale=1.0'>
     <title>元素对象的更深层理解(堆栈)</title>
     <link rel='stylesheet' href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/styles/default.min.css'>
     <script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/highlight.min.js'></script>
</head>
<body>
     <pre>
        <code style='max-height: 400px;'>
            let box = document.querySelector('.box')
            let sex = '男'
            let obj = {
                name:'里斯',
                age:200,
                sex
            }
            console.log('sex',sex);
            sex = '女'
            console.log('obj',obj);
            console.log('sex',sex);
            console.log(obj.sex);
    
    
            /**
             * 扩展题目
             * 下面写法是否可以修改当前元素的样式 如果不可以是为什么？？？   ==> 方案一 ok:
             * 方案1： let aa = box.style aa.color = 'red'
             * 方案2： let bb = box.style.color bb = 'red'
            */
           
            // 方案一
            let _boxStyle = box.style
            _boxStyle.background = 'green'
            // 方案二（失败）
            let __boxStyle = box.style.background
            __boxStyle = 'red'
    
            /**
             * because ： 因为对象是对一个地址的引用 方案一相当于是将_boxStyle的地址指向 ==> box.style  ==> 所以_boxStyle上面会有background属性
             * 一个是读属性值一个是将属性的地址指向 ==> _boxStyle
            */
    
            console.log('方案一:节点上面的属性',_boxStyle);
            console.log('方案二：节点的属性',__boxStyle);
    
    
            /** 原理 */
            let a = b = 100
            console.log(a,b);
            let arr = _arr = [123]
            console.log(arr == _arr); // [123]
            _arr[1] = 'sadsad'
            console.log(arr); // [123,'sadsad']
            console.dir(_boxStyle); // _boxStyle对象类型
            _boxStyle[11] = 'yellow'
            console.dir(__boxStyle); // 属于基本数据类型          
        </code>
     </pre>
     <div class="box" style="width: 400px;height: 200px; background: aqua;" >box</div>
     <script> hljs.highlightAll(); </script>
     <script>
        let box = document.querySelector('.box')
        let sex = '男'
        let obj = {
            name:'里斯',
            age:200,
            sex
        }
        console.log('sex',sex);
        sex = '女'
        console.log('obj',obj);
        console.log('sex',sex);
        console.log(obj.sex);


        /**
         * 扩展题目
         * 下面写法是否可以修改当前元素的样式 如果不可以是为什么？？？   ==> 方案一 ok:
         * 方案1： let aa = box.style aa.color = 'red'
         * 方案2： let bb = box.style.color bb = 'red'
        */
       
        // 方案一
        let _boxStyle = box.style
        _boxStyle.background = 'green'
        // 方案二（失败）
        let __boxStyle = box.style.background
        __boxStyle = 'red'

        /**
         * because ： 因为对象是对一个地址的引用 方案一相当于是将_boxStyle的地址指向 ==> box.style  ==> 所以_boxStyle上面会有background属性
         * 一个是读属性值一个是将属性的地址指向 ==> _boxStyle
        */

        console.log('方案一:节点上面的属性',_boxStyle);
        console.log('方案二：节点的属性',__boxStyle);


        /** 原理 */
        let a = b = 100
        console.log(a,b);
        let arr = _arr = [123]
        console.log(arr == _arr); // [123]
        _arr[1] = 'sadsad'
        console.log(arr); // [123,'sadsad']
        console.dir(_boxStyle); // _boxStyle对象类型
        _boxStyle[11] = 'yellow'
        console.dir(__boxStyle); // 属于基本数据类型 
     </script>
</body>
</html>